<template>
  <div class="ManageMain h-full bg-white">
    <a-tabs
      default-active-key="1"
      tab-position="left"
    >
      <a-tab-pane key="1" tab="基础设置">
        <a-form-model
          :rules="rules"
          :model="form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="协议" prop="xy">
                <a-input v-model="form.xy"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="域名" prop="ym">
                <a-input v-model="form.ym"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="租户" prop="zh">
                <a-input v-model="form.zh"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="8">
              <a-form-model-item label="访问密钥" prop="fwmy">
                <a-input v-model="form.fwmy"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="密钥" prop="my">
                <a-input v-model="form.my"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="超时时间" prop="cssj">
                <a-date-picker v-model="form.cssj" show-time placeholder="选择时间"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <div class="save-btn">
          <a-button type="primary">保存</a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="接口路由设置">
        <a-icon @click="addTableData('interfaceRoutingData')" style="color: #2BAEF2;cursor: pointer;margin-left: 10px" type="plus-circle" />
        <div class="table">
          <a-table
            bordered
            :data-source="interfaceRoutingData"
            :pagination="false"
            :columns="interfaceRoutingColumns"
          >
            <template slot="name" slot-scope="text, record">
              <a-input v-model="record.name">
              </a-input>
            </template>
            <template slot="route" slot-scope="text, record">
              <a-input v-model="record.route">
              </a-input>
            </template>
            <template slot="time" slot-scope="text, record">
              <a-date-picker v-model="record.time" style="width: 100%;" show-time placeholder="选择时间"/>
            </template>
            <template slot="opt" slot-scope="text, record, index">
              <a-icon type="check" style="color: #2BAEF2;cursor: pointer;margin-right: 15px"/>
              <a-icon @click="delTableData('interfaceRoutingData', index)" style="color: #f5222d;cursor: pointer" type="minus-circle" />
            </template>
          </a-table>
        </div>
        <div class="save-btn">
          <a-button type="primary">保存</a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="同步设置">
        <a-form-model
          :rules="rules"
          :model="form"
          :label-col="labelCol2"
          :wrapper-col="wrapperCol2"
        >
          <a-row>
            <a-col :span="6">
              <a-form-model-item label="同步用户" prop="tbyh">
                <a-switch v-model="form.tbyh" class="m-l-md" checked-children="开" un-checked-children="关" default-checked />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="机构同步" prop="jgtb">
                <a-switch v-model="form.jgtb" class="m-l-md" checked-children="开" un-checked-children="关" default-checked />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="覆盖用户" prop="fgyh">
                <a-switch v-model="form.fgyh" class="m-l-md" checked-children="开" un-checked-children="关" default-checked />
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item label="覆盖机构" prop="fgjg">
                <a-switch v-model="form.fgjg" class="m-l-md" checked-children="开" un-checked-children="关" default-checked />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
        <div class="save-btn">
          <a-button type="primary">保存</a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane key="4" tab="消息设置">
        <a-icon @click="addTableData('messageSetting')" style="color: #2BAEF2;cursor: pointer;margin-left: 10px" type="plus-circle" />
        <div class="table">
          <a-table
            bordered
            :data-source="messageSetting"
            :pagination="false"
            :columns="messageSettingColumns"
          >
            <template slot="msgSend" slot-scope="text, record">
              <a-switch v-model="record.xxfs" class="m-l-md" checked-children="开" un-checked-children="关" default-checked />
            </template>
            <template slot="input" slot-scope="text, record, index, column">
              <a-input v-model="record[column.key]">
              </a-input>
            </template>
            <template slot="select" slot-scope="text, record, index, column">
              <span v-show="record[column.key]" class="m-r-md">{{ record[column.key] }}</span>
              <a-button @click="selectMessageTempOrEvent(record, column.key)" type="link">选择</a-button>
            </template>
            <template slot="opt" slot-scope="text, record, index">
              <a-icon type="check" style="color: #2BAEF2;cursor: pointer;margin-right: 15px"/>
              <a-icon @click="delTableData('messageSetting', index)" style="color: #f5222d;cursor: pointer" type="minus-circle" />
            </template>
          </a-table>
        </div>
        <div class="save-btn">
          <a-button type="primary">保存</a-button>
        </div>
      </a-tab-pane>
      <a-tab-pane key="5" tab="消息订阅设置">
        <a-icon @click="addTableData('messageSubscription')" style="color: #2BAEF2;cursor: pointer;margin-left: 10px" type="plus-circle" />
        <div class="table">
          <a-table
            bordered
            :data-source="messageSubscription"
            :pagination="false"
            :columns="messageSubscriptionColumns"
          >
            <template slot="xh" slot-scope="text, record, index">
              {{index + 1}}
            </template>
            <template slot="input" slot-scope="text, record, index, column">
              <a-input v-model="record[column.key]">
              </a-input>
            </template>
            <template slot="dysj" slot-scope="text, record">
              <a-date-picker v-model="record.dysj"style="width: 100%;" show-time placeholder="选择时间"/>
            </template>
            <template slot="dyzt" slot-scope="text">
              {{ text ? '已订阅' : '未订阅' }}
            </template>
            <template slot="opt" slot-scope="text, record, index">
              <a-button type="link">
                更新
              </a-button>
              <a-button type="link" @click="record.dyzt = !record.dyzt">
                {{ record.dyzt ? '取消订阅' : '订阅'}}
              </a-button>
              <a-button type="link" @click="delTableData('messageSubscription', index)">
                删除
              </a-button>
            </template>
          </a-table>
        </div>
        <div class="save-btn">
          <a-button type="primary">保存</a-button>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import { getColumns } from '@/api/tableColumns'
export default {
  name: 'ManageMain',
  data () {
    return {
      rules: {},
      form: {
        tbyh: true,
        jgtb: true,
        fgyh: true,
        fgjg: true,
        xxfs: true
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      labelCol2: { span: 6 },
      wrapperCol2: { span: 13 },
      interfaceRoutingData: [],
      interfaceRoutingColumns: getColumns('interfaceRouting'),
      messageSubscription: [],
      messageSubscriptionColumns: getColumns('messageSubscription'),
      messageSetting: [],
      messageSettingColumns: getColumns('messageSetting')
    }
  },
  methods: {
    addTableData (type) {
      let data = {}
      switch (type) {
        case 'interfaceRoutingData':
          data = {
            name: '',
            time: '',
            route: ''
          }
         break
        case 'messageSubscription':
          data = {
            xxmc: '',
            hddz: '',
            dysj: '',
            dyzt: false
          }
          break
        case 'messageSetting' :
          data = {
            msgSend: false,
            msgPrefix: '',
            msgSuffix: '',
            msgTemp: '',
            msgEvent: ''
          }
      }
      this[type].push(data)
    },
    delTableData (type, index) {
      this[type].splice(index, 1)
    },
    selectMessageTempOrEvent (record, key) {
      this.$dialog({
        title: key === 'msgTemp' ? '选择消息模板' : '选择消息事件',
        content: () => import('./dialog/MessageTemplateOrEvent'),
        width: 600,
        centered: true,
        maskClosable: false,
        props: {
          isEvent: key === 'msgEvent'
        },
        on: {
          ok (ctl) {
            const dialogCtl = ctl.getDialogCtl()
            record.msgTemp = dialogCtl.tableData[dialogCtl.activeIndex].mbmc
            ctl.closeDialog()
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ManageMain{
  padding: 15px 10px 30px 10px;
  overflow-y: auto;
  .save-btn{
    text-align: left;
    padding-left: 20px;
  }
  .detail-title{
    font-size: 18px;
    margin-bottom: 15px;
    height: 40px;
    line-height: 40px;
    padding-left: 15px;
    //background-color: #f5f5f5;
    background-color: #f2fcff;
  }
  .table{
    padding: 10px 10px 30px 10px;
    /deep/.ant-table-tbody{
      td{
        padding: 0 !important;
      }
    }
    input{
      border: none;
    }
    /deep/.ant-calendar-picker{
      input{
        border: none;
      }
    }
  }
  .detail-content{
    padding: 15px;
    margin-bottom: 15px;
  }
  /deep/.ant-form{
    padding: 20px;
  }
}
</style>
